<template>
  <div class="quote-container" v-if="showQuote">
    <h2>
      <span v-for="(char, index) in quote" :key="index"
            :class="{ 'animate-fade-in-down': char !== ' ', 'invisible': char === ' ' }"
            :style="{ 'animation-delay': (index * 0.1) + 's' }">{{ char }}</span>
    </h2>
    <p class="animate-fade-in-up">{{ author }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showQuote: false,
      quote: '不积跬步，无以至千里。不积小流，无以成江海。',
      author: '《劝学篇》—— 荀子'
    };
  },
  mounted() {
    // 使用定时器延迟显示动画效果
    setTimeout(() => {
      this.showQuote = true;
    }, 500);
  }
};
</script>

<style scoped>
.quote-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 50vh;
}

h2 {
  font-size: 36px;
  line-height: 48px;
  text-align: center;
}

.animate-fade-in-down-enter-active,
.animate-fade-in-down-leave-active {
  transition: opacity 0.5s ease-out;
}

.animate-fade-in-down-enter,
.animate-fade-in-down-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

.animate-fade-in-up-enter-active,
.animate-fade-in-up-leave-active {
  transition: opacity 0.5s ease-out;
}

.animate-fade-in-up-enter,
.animate-fade-in-up-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

.invisible {
  opacity: 0;
}
</style>